<template>
  <view class="container">
    <view class="info">
      <image class="img" :src="detail.avatarURL" :lazy-load="true" mode="aspectFill"></image>
      <view class="name">{{ detail.name }}</view>
      <uni-list style="width: 100%">
        <uni-list-item title="学号" :rightText="detail.number" />
        <uni-list-item title="性别" :rightText="detail.sex" />
        <uni-list-item title="年级" :rightText="detail.grade" />
        <uni-list-item title="学院" :rightText="detail.department" />
        <uni-list-item title="班级" :rightText="detail.class" />
        <uni-list-item title="电子邮箱" :rightText="detail.email ? detail.email : '-'" />
        <uni-list-item title="联系方式" :rightText="detail.mobilePhone" />
      </uni-list>
    </view>
    <view class="btns">
      <view class="btn" @click="handleCall">
        <uni-icons customPrefix="iconfont" type="icon-phone" size="24"></uni-icons>
        拨打电话
      </view>
      <a class="btn" v-if="detail.email" :href="'mailto:' + detail.email">
        <uni-icons customPrefix="iconfont" type="icon-email" size="24"></uni-icons>
        发送邮件
      </a>
<!--      <view class="btn" @click="handleChat">
        <uni-icons customPrefix="iconfont" type="icon-Chat" size="24"></uni-icons>
        发起聊天
      </view> -->
    </view>
  </view>
</template>

<script setup>
  import { ref, onBeforeMount } from 'vue'
  import { GetUserInfo } from '@/apis/user'
  import { onLoad } from '@dcloudio/uni-app'

  const detail = ref()

  function handleCall() {
    uni.makePhoneCall({
      phoneNumber: detail.value.mobilePhone
    })
  }

  function handleChat() {
    console.log('chat')
  }

  onLoad(async (e) => {
    await GetUserInfo({
      userId: e.userId
    }).then((res) => {
      detail.value = res.data
      console.log(detail.value)
    })
    // detail.value = JSON.parse(e.detail);
    uni.setNavigationBarTitle({
      title: detail.value.name
    })
  })
</script>

<style lang="scss" scoped>
  .container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .info {
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20rpx;

      .img {
        border-radius: 50%;
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 20rpx;
      }

      .name {
        margin-bottom: 20rpx;
      }
    }

    .btns {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 140rpx;
      background-color: #a8d2fa;

      a {
        text-decoration: none;
      }

      .btn {
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        gap: 10rpx;
        color: #333;
      }
    }
  }
</style>
